<script setup>
  const props = defineProps({
    modelValue: {
      type: String,
      default: '',
    },
    color: {
      type: String, default: '#000',
    },
    size: {
      type: String, default: '30rpx',
    },
    styles: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  const emits = defineEmits(['click']);

  const { modelValue, color, size, styles } = props;
  const custStyles = {
    color, size,
    ...styles,
  };

</script>

<template>
  <view class="container"  :styles="custStyles" @click="emits('click')">{{ modelValue }}</view>
</template>

<style lang="scss">
  .container {
    width: 30rpx;
    height: 30rpx;
    font-size: 20rpx;
    border-radius: 50%;
    border: 1rpx solid;
    display: flex;
    justify-content: center;
  }
</style>